.pxToRem(@p, @px) {
    @{p}: @px / 75px * 1rem;
}

body {
    background: #eee;
}

.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    position: fixed;
    top: 0;
    z-index: 99;
    .pxToRem(height, 100);
    .left {
        .pxToRem(font-size, 40);
        font-weight: bolder;
        padding-left: 5%;
    }
    .right {
        width: 60%;
        padding-right: 5%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        figure {
            padding: 0 10%;
            img {
                width: 100%;
            }
        }
    }
}

.section {
    background: #fff;
    .pxToRem(margin-top, 100);
    .swiper {
        .swiper-container {
            width: 100%;
            height: 100%;
            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                figure {
                    width: 100%;
                    img {
                        width: 100%;
                    }
                }
            }
            .yuan {
                left: 40% !important;
            }
        }
    }
    .list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap; //    margin: 2% 0;   
        dl {
            padding: 5% 0;
            width: 48%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #ccc;
            dt {
                width: 35%;
                img {
                    width: 100%;
                }
            }
            dd {
                h2 {
                    .pxToRem(font-size, 40);
                    font-weight: bold;
                }
                p {
                    color: #ccc;
                    padding: 11% 0;
                    .pxToRem(font-size, 30);
                }
            }
        }
        dl:nth-child(2n-1) {
            border-right: 1px solid #ccc;
        }
    }
}

.shang {
    width: 95%;
    padding: 0 2%;
    .lists {
        .pxToRem(margin-top, 30);
        border: 1px solid #ccc;
        box-shadow: 0 5px 0 0 #eee;
        .top {
            background: #fff;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 1px solid #ccc;
            figure {
                padding: 3%;
            }
            p {
                .pxToRem(font-size, 30);
            }
        }
        .xin {
            background: #fff;
            padding: 2% 0;
            figure {
                width: 100%;
                background: #fff;
                img {
                    width: 100%;
                }
            }
        }
        h2 {
            .pxToRem(font-size, 30);
            font-weight: bolder;
            .pxToRem( line-height, 40);
            padding: 3%;
        }
        p {
            // width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #ccc;
            padding: 0 3%;
            span {
                .pxToRem(font-size, 28);
            }
        }
    }
    .dl {
        background: #FFF;
        .pxToRem(margin-top, 30);
        .dl_top {
            background: #fff;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 1px solid #ccc;
            figure {
                padding: 3%;
            }
            p {
                .pxToRem(font-size, 30);
            }
        }
        dl {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 3% 0;
            dt {
                width:30%;
                padding: 0 2%;
                img {
                    width: 100%;
                }
            }
            dd {
                padding-left: 5%;
                width: 65%;
                h2 {
                    .pxToRem(font-size, 30);
                    padding: 3% 0;
                    font-weight: bold;
                    .pxToRem( line-height,40);
                }
                span {
                    color: red;
                    .pxToRem(font-size, 28);
                }
                .fip {
                    padding: 3% 0;
                    .pxToRem(font-size, 28);
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .pp {
                        display: flex;
                        justify-content: space-around;
                        width: 50%;
                        img {
                            .pxToRem(width, 30);
                            .pxToRem(height, 30);
                        }
                        span {
                            color: #000; // padding-left: 5%;
                            .pxToRem(font-size, 26);
                        }
                    }
                    .zan {
                        width: 30%;
                        display: flex;
                        justify-content: space-around;
                        text-align: center;
                        padding: 0 3%;
                        figure {
                            display: flex;
                            img {
                                .pxToRem(width, 30);
                                .pxToRem(height, 30);
                                padding: 0 5%;
                            }
                            p{
                                padding: 0 15%;
                                color: #000;
                            }
                        }
                    }
                }
            }
        }
    }
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .pxToRem(height,
    100);
    position: fixed;
    bottom: 0;
    z-index: 99;
    background: #fafafa;
    padding: 2% 0;
    border-top: 1px solid #ccc;
    a {
        width: 20%;
        dl {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            dt {
                width: 50%;
                text-align: center;
                padding: 5% 0;
                img {
                    width: 100%;
                }
            }
            dd {
                padding: 3% 0;
                .pxToRem(font-size,
                28);
            }
        }
        dl:nth-child(1) {
            padding-left: 3%;
        }
        dl:nth-child(5) {
            padding-right: 3%;
        }
    }
}